<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>系统登录</title>
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/elemui-2.15.9.css}"/>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">

<!-- 登录卡片 -->
<div class="bg-white p-8 rounded-lg shadow-lg w-96">

    <!-- 标题 -->
    <h1 class="text-2xl font-semibold text-center text-gray-700 mb-6">登录页面</h1>

    <!-- 错误信息 -->
    <p class="error text-red-500 text-center mb-4"></p>

    <!-- 登录表单 -->
    <form id="form-login" method="post">
        <!-- 用户名 -->
        <div class="mb-4">
            <label for="username" class="block text-sm font-medium text-gray-700 mb-2">用户名</label>
            <input type="text" id="username" name="username" autocomplete="off"
                   class="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
        </div>

        <!-- 密码 -->
        <div class="mb-4">
            <label for="password" class="block text-sm font-medium text-gray-700 mb-2">密码</label>
            <input type="password" id="password" name="password" autocomplete="off"
                   class="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
        </div>

        <!-- 验证码 -->
        <div class="mb-4">
            <label for="captchaCode" class="block text-sm font-medium text-gray-700 mb-2">验证码</label>
            <input type="text" id="captchaCode" name="captchaCode" autocomplete="off"
                   class="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
        </div>

        <!-- 验证码图片 -->
        <div class="mb-4 flex justify-between items-center">
            <img id="captchaImage" src="/captchaCode" alt="验证码" class="cursor-pointer rounded-md" title="看不清？换一张"/>
            <button type="button" class="text-sm text-blue-500 hover:underline">换一张</button>
        </div>

        <!-- 登录按钮 -->
        <div class="mb-4">
            <button type="button" id="btn-login" class="w-full p-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
                登录
            </button>
        </div>
    </form>

</div>

<script type="text/javascript" th:src="@{/static/util/javascript/jquery-3.5.1.min.js}"></script>
<script th:inline="javascript">
    const ctx = [[${#ctx.getExchange().getRequest().getContextPath()}]];

    $('#btn-login').bind('click', function () {
        $.ajax({
            url: '/userLogin',
            type: 'post',
            data: $('#form-login').serialize(),
            success: function (obj) {
                if (obj.code == 200) {
                    window.location.href = ctx + '/index';
                } else {
                    $('.error').text(obj.msg);
                }
            },
            dataType: 'json'
        });
    });

    // 刷新验证码
    $("#captchaImage").bind("click", function () {
        $(this).hide().attr('src', '/captchaCode?random=' + Math.random()).fadeIn();
    });
</script>

</body>
</html>
